<template>
	<view class="shoplistBox">
		<view class="top flex-x-between">
			<input class="search-input flex-x-between" v-model="searchVal" type="text" placeholder="输入关键字搜索" />
			<text @click="handleSearch" class="iconfontPT iconsousuo"></text>
		</view>
		<view class="left">
			<view class="classBox">
				<view :class="activeClass == -1 ? 'active item' : 'item'" @click="getgoods(0, -1)">全部</view>
				<view :class="activeClass == index ? 'active item' : 'item'" v-for="(item, index) in classList" :key="index" @click="getgoods(item.id, index)">
					{{ item.title }}
				</view>
			</view>
		</view>
		<view class="right">
			<view class="goodsListBox" v-if="goodsList.length > 0">
				<view class="goodsItem" v-for="(item, index) in goodsList" :key="index">
					<image :src="`${host}${item.img}-t.m60xx`" mode="aspectFill"></image>
					<view class="shopInfo">
						<view class="shopLeft">
							<view class="name">{{ item.title }}</view>
							<view class="price">
								<text class="price__currency">￥</text>
								{{ item.plat_price }}
								<text class="price__origin">{{ `￥${item.price}` }}</text>
							</view>
						</view>
						<view class="shopRight">
							<text :class="item.status == 0 ? 'active buy' : 'buy'" @click="setOff(item)">{{ item.status == 0 ? '上架' : '下架' }}</text>
							<view class="buttonBox">
								<text class="iconfontPT iconzaixianjianli" @click="gotoadd(item.id)"></text>
								<text class="iconfontPT iconshanchu11" @click="del(item)"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else><noData texts="暂无商品"></noData></view>
		</view>
		<view class="add" @click="gotoadd()"><text>添加商品</text></view>
	</view>
</template>

<script>
import { getGoods, setOff, setOn, delGoods } from '../../../apis/shop/api.js';
import noData from '../../components/public/no-data.vue';
export default {
	data() {
		return {
			searchVal: '',
			class_id: '',
			store_id: '',
			goodsList: [],
			classList: [],
			activeClass: -1,
			token: '',
			store_id: ''
		};
	},
	onLoad(option) {
		this.store_id = uni.getStorageSync('store_id');
		this.token = uni.getStorageSync('token');
		this.getList();
	},
	computed: {
		host() {
			return this.$baseHost.qiniuHost;
		}
	},
	onShow(e) {
		let pages = getCurrentPages();
		let currPage = pages[pages.length - 1]; //当前页面
		let that = this;
		if (currPage.data.isDoRefesh) {
			currPage.data.isDoRefesh = false;
			that.getList();
		}
	},
	methods: {
		handleSearch() {
			this.getList();
		},
		gotoadd(id) {
			if (id != undefined) {
				uni.navigateTo({
					url: '/pages/shopmanager/goodsManager/addgood?id=' + id
				});
			} else {
				uni.navigateTo({
					url: '/pages/shopmanager/goodsManager/addgood'
				});
			}
		},
		getList() {
			let that = this;
			getGoods({
				search: that.searchVal,
				store_id: that.store_id,
				class: that.class_id,
				status: '',
				token: that.token
			}).then(res => {
				that.classList = res.data.class;
				that.goodsList = res.data.goods;
			});
		},
		getgoods(classid, index) {
			this.class_id = classid;
			this.activeClass = index;
			this.getList();
		},
		del(item) {
			let that = this;
			delGoods({
				id: item.id,
				token: that.token
			}).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: '删除成功'
					});
					that.getList();
				}
			});
		},
		setOff(item) {
			let that = this;
			if (item.status == 0) {
				setOn({
					id: item.id,
					token: that.token
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '上架成功'
						});
						that.getList();
					}
				});
			} else if (item.status == 1) {
				setOff({
					id: item.id,
					token: that.token
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '下架成功'
						});
						that.getList();
					}
				});
			}
		}
	}
};
</script>

<style lang="less">
page {
	width: 100%;
	height: 100%;
}

.shoplistBox {
	height: 100%;

	.top {
		padding: 30rpx;

		input {
			border: none;
			background-color: #f8f8f8;
			color: #999;
			height: 64rpx;
			line-height: 64rpx;
			text-indent: 40rpx;
			font-size: 28rpx;
			border-radius: 32rpx;
			width: 92%;
			padding-left: 30rpx;
			box-sizing: border-box;
		}
	}

	.left {
		width: 192rpx;
		background-color: #f8f8f8;
		height: calc(~'100% - 290rpx');
		float: left;

		.item {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #323232;
			font-weight: 500;

			&.active {
				background-color: #fff;
				color: #e41805;
				font-weight: bold;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -18rpx;
					height: 36rpx;
					border-right: 6rpx solid #e41805;
				}
			}
		}
	}

	.right {
		box-sizing: border-box;
		width: calc(~'100% - 200rpx');
		height: calc(~'100% - 290rpx');
		overflow: auto;
		float: right;
		padding: 30rpx;

		image {
			width: 132rpx;
			height: 132rpx;
			float: left;
		}

		.goodsItem {
			padding-top: 40rpx;
			box-sizing: border-box;
			height: 200rpx;
			border-bottom: 1px solid rgba(202, 202, 202, 0.5);

			&:first-child {
				padding-top: 0;
				height: 160rpx;
			}
		}

		.shopInfo {
			height: 100%;
			float: left;
			margin-left: 20rpx;
			width: calc(~'100% - 152rpx');

			&::after {
				content: '';
				display: block;
				height: 0;
				overflow: hidden;
				clear: both;
			}

			.shopLeft {
				float: left;
				// padding-bottom: 170rpx;

				.name {
					font-size: 30rpx;
					color: #343333;
				}

				.price {
					font-size: 30rpx;
					color: #e41805;
					margin-top: 28rpx;

					&__origin {
						font-size: 24rpx;
						color: #999;
						text-decoration: line-through;
						display: block;
					}

					&__currency {
						font-size: 24rpx;
					}
				}
			}

			.shopRight {
				float: right;
				text-align: center;
				height: 80%;
				position: relative;
				// padding-bottom: 170rpx;

				.buy {
					display: block;
					width: 100rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					color: #cccccc;
					background-color: #f8f8f8;
					border-radius: 25rpx;
					font-size: 24rpx;

					&.active {
						background-color: #e41805;
						color: #fff;
					}
				}

				.buttonBox {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;

					text {
						font-size: 30rpx;
						color: #333;
						float: left;

						&:nth-child(2) {
							float: right;
							font-size: 34rpx;
						}
					}
				}
			}
		}
	}
}

.add {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30rpx;
	box-shadow: -1rpx -2rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
	background-color: #fff;

	text {
		display: block;
		padding: 20rpx 0;
		background-color: #e41805;
		color: #fff;
		text-align: center;
		border-radius: 10rpx;
	}
}
</style>
